<template>
  <div class="card-carousel" :style="'width:' + swiperWidth + 'px'">
    <div class="swiper-btn-control-wrap">
      <div class="swiper-btn-control btn-control1" @click.stop="prev">
        <span class="el-icon-arrow-left btn-control"></span>
      </div>
      <div class="swiper-btn-control btn-control2" @click.stop="next">
        <span class="el-icon-arrow-right btn-control"></span>
      </div>
      <div class="swiper-wrap">
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper" :style="'width:' + swiperWidth + 'px'">
          <div v-for="(item, index) in imgs" :style="config5[index]" :key="item.id" @mouseover="swiper = false"
            @mouseleave="swiper = true" class="swiperclass">
            <div class="swiper-img-wrap" @click.stop="chooseItem(item, index)">
              <img :src="item.cover" style="
                  width: 100%;
                  height: 100%;
                  cursor: pointer;
                  object-fit: cover;
                " />
            </div>
          </div>
          <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    carouselList: {
      type: Array,
      default() {
        return [];
      }
    },
    showNum: {
      type: Number | String,
      default: 7
    },
    customWidth: {
      type: Number | String,
      default: ''
    },
  },
  mounted() {
    // 自动轮播
    // this.t1 = setInterval(() => {
    //   if (this.swiper) {
    //     this.next();
    //   }
    // }, 4000);
  },
  computed: {
    swiperWidth() {
      return this.showNum == 7 ? this.customWidth || 1080 : this.customWidth || 720;
    }
  },
  methods: {
    computeDistance(form, to, arr) {
      let maxDistance =
        Array.isArray(arr) && arr[form] && arr[to]
          ? Math.floor(arr.length / 2)
          : 0;
      if (form == to)
        return {
          direction: 0,
          distance: 0
        };
      else {
        return {
          distance:
            Math.abs(to - form) > maxDistance
              ? arr.length - Math.abs(to - form)
              : Math.abs(to - form),
          direction:
            (Math.abs(to - form) > maxDistance ? -1 : 1) * (to > form ? 1 : -1)
        };
      }
    },
    computePosition(from, direction = 1, distance, arr) {
      if (from + direction * distance > arr.length - 1) {
        return (from + direction * distance) % arr.length;
      } else if (from + direction * distance < 0) {
        return (
          arr.length - (Math.abs(from + direction * distance) % arr.length)
        );
      }
      return from + direction * distance;
    },
    chooseItem(item, index) {
      // this.goArticle(item);
      // 点击

      item.bid = 2;
      localStorage.setItem("banner", JSON.stringify(item));
      // this.$router.push({
      //   path: "/index/particulars",
      //   query: {
      // 		type:'banner'
      //   },
      // });
      const routeLink = this.$router.resolve({
        path: "/index/particulars?type=banner"
      });
      window.open(routeLink.href, "_blank");

      console.log(item, index);
      // this.imgs.forEach(el => {
      //   if (item.cover == el.cover) {
      //     el.bid = 2;
      //     localStorage.setItem("banner", JSON.stringify(el));
      //     // this.$router.push({
      //     //   path: "/index/particulars",
      //     //   query: {
      //     // 		type:'banner'
      //     //   },
      //     // });
      //     const routeLink = this.$router.resolve({
      //       path: "/index/particulars?type=banner"
      //     });
      //     window.open(routeLink.href, "_blank");
      //   }
      // })

      // 中间图片索引与点击的图片的索引
    },
    // 滑动上一个
    prev(index) {
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      // this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      console.log("滑动");
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      // this.centerIndex("next");
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    //停止页面滚动
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },
    //开启页面滚动
    Move() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = ""; //出现滚动条
      document.removeEventListener("touchmove", m, { passive: true });
    },
    addCardStyle() {
      if (this.imgs.length > Number(this.showNum)) {
        let addtime = this.imgs.length - Number(this.showNum);
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s"
          });
        }
      }
    }
  },

  watch: {
    carouselList(newV, oldV) {
      if (newV.length > 0) {
        this.imgs = newV.map((item, index) => {
          return {
            ...item,
            id: item.id,
            cover: this.imgUrl + item.image,
            index: index
          };
        });
        // this.imgs.push({
        //   id: 107,
        //   cover: require("@/assets/temp/carousel5.png"),
        //   index: 6,
        // });
        this.addCardStyle();
      } else {
        // this.imgs = [];
      }
    }
  },
  created() {
    this.imgs = [
      {
        id: 100,
        cover: require("@/assets/verify/1.jpg"),
        index: 0
      },
      {
        id: 101,
        cover: require("@/assets/verify/2.jpg"),
        index: 1
      },
      {
        id: 102,
        cover: require("@/assets/verify/3.jpg"),
        index: 2
      },
      {
        id: 103,
        cover: require("@/assets/verify/4.jpg"),
        index: 3
      },
      {
        id: 104,
        cover: require("@/assets/verify/5.jpg"),
        index: 4
      }
    ];
    if (this.showNum == 7) {
      this.config5 = [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        }
      ];
    } else if (this.showNum == 5) {
      this.config5 = [
        {
          id: "-A",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "-22%",
          opacity: 0,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "0%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "82%",
          top: "14%",
          left: "13%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "45%",
          height: "100%",
          top: "0px",
          left: "50%",
          marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "82%",
          top: "14%",
          left: "59%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "78%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "22%",
          height: "72%",
          top: "19.2%",
          left: "100%",
          opacity: 0,
          zIndex: 0,
          transition: ".4s"
        }
      ];
    }

    this.addCardStyle();
  },
  data() {
    return {
      imgUrl: "",
      t1: null,

      swiper: true,
      imgs: [],
      currentIndex: 2,

      config5: [
        // {
        //   id: "-A",
        //   position: "absolute",
        //   width: "18%",
        //   height: "32%",
        //   top: "120px",
        //   left: "-22%",
        //   opacity: 0,
        //   zIndex: 0,
        //   transition: ".4s",
        // },
        {
          id: "A",
          position: "absolute",
          width: "400px",
          height: "250px",
          top: "88px",
          left: "0%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "495px",
          height: "310px",
          top: "43px",
          left: "123px",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "589px",
          height: "369px",
          top: "0px",
          left: "289px",

          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "495px",
          height: "310px",
          top: "43px",
          left: "calc(100% - 626px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "400px",
          height: "250px",
          top: "88px",
          left: "calc(100% - 401px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        }
        // {
        //   id: "E+",
        //   position: "absolute",
        //   width: "18%",
        //   height: "32%",
        //   top: "120px",
        //   left: "100%",
        //   opacity: 0,
        //   zIndex: 0,
        //   transition: ".4s",
        // },
      ]
    };
  }
};
</script>

<style lang="less" scoped>
// 轮播图位置和按钮信息
.swiper-btn-control-wrap {
  position: relative;
  z-index: 99 !important;
  width: 100%;
  height: 450px;
  height: 270px;
  display: inline-block;
  text-align: center;

  &:hover {
    .swiper-btn-control {
      opacity: 1;

      &.btn-control1 {
        left: 0px;
      }

      &.btn-control2 {
        right: 0px;
      }
    }
  }

  .swiper-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .swiper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;

    .swiperclass {
      // margin-top: 10px;
      box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);

      .swiper-img-wrap {
        // -webkit-box-reflect: below -5px -webkit-linear-gradient(
        //     top,
        //     rgba(255, 0, 0, 0) 80%,
        //     rgba(255, 0, 0, 0.3) 100%
        //   );
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .swiper-btn-control {
    // box-sizing: border-box;
    position: absolute;
    z-index: 11111;
    top: 191px;
    width: 44px;
    height: 44px;

    top: 120px;
    width: 28px;
    height: 28px;
    opacity: 0;
    transition: all 0.3s;
    // background: #e2e2e2;

    // border: 2px solid #64b6a8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000000;

    &:hover {
      background: var(--theme-color);
      color: #ffffff;
    }

    .btn-control {
      font-weight: 900;

      font-size: 20px;
    }

    &.btn-control1 {
      // left: -88px;
      left: 20px;
    }

    &.btn-control2 {
      // right: -88px;
      right: 20px;
    }
  }
}
</style>
